<template>
    <section>
        <div class="SignIn_new">
            <HeaderComponent id="header" title="好声音大赛" background='#ffffff' color='#000000' image_='0' size='4.8vw' />
            <!-- 头部信息 -->
            <div class="top_title" :style="{ paddingTop: height + 'px' }">
            <div class="header">
                <img :src="require('@/assets/images/good_voice/voice_title.png')" alt="">
                <img :src="require('@/assets/images/good_voice/voice_sign_btn.png')" alt="" @click="show_model = true,model_type='1'">
            </div>
            <div class="invitation_gift">
                <!-- 海选礼物 -->
                <div class="singer_gift">
                <div class="gift_icon">
                    <div></div>
                    <img :src="require('@/assets/images/good_voice/5200.png')" alt="">
                </div>
                <div class="gift_center">
                    <img :src="require('@/assets/images/good_voice/voice_gift_text.png')" alt="">
                </div>
                </div>
                <!-- 奖池 -->
                <div class="Jackpot">
                <div class="top_jackpot">
                    <img :src="require('@/assets/images/good_voice/jackpo_rule_icon.png')" alt=""
                    @click="show_model = true,model_type='2'">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_right.png')" alt="">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_left.png')" alt="">
                    <div class="Cumulative">
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_left.png')" alt="">
                    <div>
                        <img :src="require('@/assets/images/good_voice/jackpo_text.png')" alt="">
                    </div>
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_right.png')" alt="">
                    </div>
                </div>
                <img class="voice_decorate_img" :src="require('@/assets/images/good_voice/voice_decorate_img.png')" alt="">
                <div class="Cumulative_">
                    <div class="Diamonds">
                    <!-- <img :src="require('@/assets/images/good_voice/diamond_img.png')" alt=""> -->
                    <span>￥ {{total_money.toString().replace(/\d+/, function (n) {
                                return n.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
                            })}}
                    </span>
                    </div>
                    <img class="box_gift" :src="require('@/assets/images/good_voice/jackpo_box_img.png')" alt="">
                    <div class="match_rewards">
                    <div @click="show_model = true,model_type='3'"><span>赛事奖励</span></div>
                    <div @click="show_model = true,model_type='4'"><span>赛事流程</span></div>
                    </div>
                </div>

                </div>
                <!-- 免费领取 -->
                <div class="receive">
                <img :src="require('@/assets/images/good_voice/helpstick_img.png')" alt="">
                <div class="text_rule">
                    <span>每位玩家每天都可</span>
                    <span>免费领取20个应援棒</span>
                    <span>为喜欢的歌手在活动页面投票!</span>
                </div>
                <div class="click_receive">
                    <img v-if="get_status==0" :src="require('@/assets/images/good_voice/receive_btn_nor.png')" alt=""
                    @click="goodVoiceGet">
                    <img v-else :src="require('@/assets/images/good_voice/receive_btn_gray.png')" alt="">
                </div>
                </div>


                <!-- 海选时间 -->
                <div class="AuditionTime">
                <div class="SelectionStage">
                    <div v-for="item,index in step_list" :key="index" :class="index+1 == step?'bg_cur'+(index*1+1*1)*1:''"
                    @click="keyword='';cur_tab(index+1);">
                    <img :src="require('@/assets/images/good_voice/' + (index+1) + '.png')" />
                    <div class="time_some">{{item.start_date}}-{{item.end_date}}</div>
                    <span>{{item.step_subtitle}}</span>
                    </div>
                </div>
                <!-- 倒计时 -->
                <div class="countDown">
                    <CountDown :time="showTime" @finish="SignIn_new">
                        <template v-slot="timeData" v-if="isStart_time">
                            距离{{step_list[step-1].step_name}}结束还有
                            <div class="item">{{ timeData.days < 10 ? '0' + timeData.days : timeData.days }}</div>天
                            <div class="item">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours}}</div>时
                            <div class="item">{{ timeData.minutes< 10 ? '0' + timeData.minutes: timeData.minutes}}</div>分
                        </template>
                        <!-- <template v-else>
                            {{step_list[step-1].step_name}}已结束
                        </template> -->
                        <template v-slot="timeData" v-else>
                            {{step_list[step-1].step_name}}已结束
                            <div class="item">{{ timeData.days < 10 ? '0' + timeData.days : timeData.days }}</div>天
                            <div class="item">{{ timeData.hours < 10 ? '0' + timeData.hours : timeData.hours}}</div>时
                            <div class="item">{{ timeData.minutes< 10 ? '0' + timeData.minutes: timeData.minutes}}</div>分
                        </template>

                    </CountDown>
                </div>
                </div>

                <!-- 排行榜 -->
                <div class="rank_list">
                <div class="top_jackpot">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_left.png')" alt="">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_right.png')" alt="">
                    <!-- <img :src="require('@/assets/images/good_voice/jackpo_light_left.png')" alt=""> -->
                    <div class="Cumulative">
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_left.png')" alt="">
                    <div>
                        <img v-if="step==1" :src="require('@/assets/images/good_voice/haixuan_list_text.png')" alt="">
                        <img v-if="step==2" :src="require('@/assets/images/good_voice/yusai_text.png')" alt="">
                        <img v-if="step==3" :src="require('@/assets/images/good_voice/fusai_text.png')" alt="">
                        <img v-if="step==4" :src="require('@/assets/images/good_voice/juesai_text.png')" alt="">
                        <img v-if="step==5" :src="require('@/assets/images/good_voice/zongjuesai_text.png')" alt="">
                    </div>
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_right.png')" alt="">
                    </div>
                </div>
                <img class="voice_decorate_img" :src="require('@/assets/images/good_voice/list_decorate_img.png')" alt="">
                <div class="seach_" v-if="step != 5">
                    <div class="ipt_btn">
                    <input type="text" v-model="keyword" placeholder="输入声贝ID、用户昵称进行搜索" @keyup.enter="cur_tab(step)">
                    <div class="sousuo" @click="cur_tab(step)">搜索</div>
                    </div>
                    <div class="stage_" v-if="step!=1">
                    <div class="flei_">
                        <Popover v-model:show="showPopover" trigger="click">
                        <div class="tab_ui">
                            <div :class="sort==2?'active_xuanzhong':''" @click="tab_avtive_index(2)">
                                按分数
                                <img v-if="sort==2" :src="require('@/assets/images/good_voice/list_ok_icon.png')" alt="">
                            </div>
                            <div :class="sort==1?'active_xuanzhong':''" @click="tab_avtive_index(1)">
                                按票数
                                <img v-if="sort==1" :src="require('@/assets/images/good_voice/list_ok_icon.png')" alt="">
                            </div>
                        </div>
                        <template #reference>
                            <span>{{sort==2?'按分数':'按票数'}}</span>
                            <img :src="require('@/assets/images/good_voice/list_more_icon.png')" alt="">
                        </template>
                        </Popover>
                    </div>
                    </div>
                </div>
                <div class="rank_box" v-if="step==1 || step==2">
                    <div class="rank_100_box" v-if="list.length>0">
                    <div v-for="item,index in list" :key="index" :class="step==1?'single_box single_boxstep1':'single_box'">
                        <div class="center_box_tank">
                        <div class="pm_pingf">
                            <div>{{item.rank}}</div>
                            <span>{{item.total_score}}分</span>
                        </div>
                        <div class="box_header_bg" @click="open_usrt(item.user_id)">
                            <img :src="require('@/assets/images/good_voice/list_person_frame.png')" alt="">
                            <img :src="item.head_pic" alt=""
                            onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';">
                        </div>
                        <span class="name_slice">{{splice_(item.nickname)}}</span>
                        <div class="voice_mp3" @click="playvoice(index)">
                            <audio :ref="'middle'+ index" :src="item.song_url" @pause="onPause" @play="onPlay"
                            @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata"></audio>
                            <img v-if="item.play" :src="require('@/assets/images/good_voice/list_open_icon.png')" alt="">
                            <img v-else :src="require('@/assets/images/good_voice/list_stop_icon.png')" alt="">
                            <div>
                            <NoticeBar :scrollable="item.play" :text="item.song_name" speed='44' />
                            <!-- {{splice_2(item.song_name)}} -->
                            </div>
                        </div>
                        <div class="Help_voice" v-if="step !=1">
                            <div>应援</div>
                            <span>{{item.vote_num}}</span>
                        </div>
                        <div v-if="stepPre == step && step !=1" class="btn_vote" @click="btn_vote(item,index)">投票</div>
                        <div v-if="stepPre != step && step !=1" class="btn_vote" @click="btn_vote2">投票</div>
                        </div>
                    </div>
                    </div>
                    <div class="not_list" v-else>
                    暂无数据
                    </div>
                </div>
                <div class="rank_box_nth2" v-else-if="step==3 || step==4">
                    <div class="rank_32_box" v-if="list.length>0">
                    <div class="single_box_32" v-for="item,index in list" :key="index">
                        <div class="center_32">
                        <div class="header_image_box32" @click="open_usrt(item.user_id)">
                            <img :src="require('@/assets/images/good_voice/voice_gift_frame.png')" alt="">
                            <img :src="item.head_pic" alt=""
                            onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';">
                        </div>
                        <div class="name_wenben_box">
                            <span>{{splice_2(item.nickname)}}</span>
                            <div class="voice_mp3" @click="playvoice(index)">
                            <audio :ref="'middle'+ index" :src="item.song_url" @pause="onPause" @play="onPlay"
                                @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata"></audio>
                            <img v-if="item.play" :src="require('@/assets/images/good_voice/list_open_icon.png')" alt="">
                            <img v-else :src="require('@/assets/images/good_voice/list_stop_icon.png')" alt="">
                            <div>
                                <!-- <span>{{splice_2(item.song_name)}}</span> -->
                                <NoticeBar :scrollable="item.play" :text="item.song_name" speed='44' />
                            </div>
                            </div>
                            <div class="Help_voice">
                            <div>应援</div>
                            <span>{{item.vote_num}}</span>
                            </div>
                        </div>
                        <div v-if="stepPre == step" class="btn_vote" @click="btn_vote(item,index)">投票</div>
                        <div v-else class="btn_vote" @click="btn_vote2">投票</div>
                        <!-- <div v-else class="btn_vote btn_vote2">投票结束</div> -->
                        </div>
                        <div class="rank_def">
                        <div>{{item.rank}}</div>
                        <span>{{item.total_score}}分</span>
                        </div>
                    </div>
                    </div>
                    <div class="not_list" v-else>
                    暂无数据
                    </div>
                </div>
                <div class="rank_box_nth3" v-else>
                    <template v-if="list.length>0">
                    <div class="rank3_of_type" v-for="item,index in list" :key="index">
                        <img v-if="index == 0" :src="require('@/assets/images/good_voice/list_no.1_frame.png')" alt="">
                        <img v-if="index == 1" :src="require('@/assets/images/good_voice/list_no.2_frame.png')" alt="">
                        <img v-if="index == 2" :src="require('@/assets/images/good_voice/list_no.3_frame.png')" alt="">
                        <div :class="index==1?'center_list_nor center_list_nor2':'center_list_nor'">
                        <div class="img_back" @click="open_usrt(item.user_id)">
                            <img :src="require('@/assets/images/good_voice/person_frame.png')" alt="">
                            <div>
                            <Image :src="item.head_pic" width="100%" height="100%" alt="1" fit="cover"
                                onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';" />
                            </div>
                        </div>
                        <div class="infor_list">
                            <span>{{item.total_score}}分</span>
                            <span>{{splice_(item.nickname)}}</span>
                            <div class="voice_mp3" @click="playvoice(index)">
                            <audio :ref="'middle'+ index" :src="item.song_url" @pause="onPause" @play="onPlay"
                                @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata"></audio>
                            <img v-if="item.play" :src="require('@/assets/images/good_voice/list_open_icon.png')" alt="">
                            <img v-else :src="require('@/assets/images/good_voice/list_stop_icon.png')" alt="">
                            <div>
                                <NoticeBar :scrollable="item.play" :text="item.song_name" speed='44' />
                                <!-- <span>{{splice_2(item.song_name)}}</span> -->
                            </div>
                            </div>
                            <div class="Help_voice">
                            <div>应援</div>
                            <span>{{item.vote_num}}</span>
                            </div>
                            <div v-if="stepPre == step" class="btn_vote" @click="btn_vote(item,index)">投票</div>
                            <!-- <div v-else class="btn_vote btn_vote2">投票结束</div> -->
                            <div v-else class="btn_vote" @click="btn_vote2">投票</div>
                        </div>
                        </div>
                        <div class="text_list_ van-ellipsis">{{item.origin_sign}}</div>
                    </div>
                    </template>
                    <template v-else>
                    <div class="not_list">
                        暂无数据
                    </div>
                    </template>
                </div>

                </div>

                <!-- 嘉宾 -->
                <div class="Jackpot distinguished">
                <div class="top_jackpot">
                    <img :src="require('@/assets/images/good_voice/guest_standard_icon.png')" alt=""
                    @click="show_model = true,model_type='5'">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_right.png')" alt="">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_left.png')" alt="">
                    <div class="Cumulative">
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_left.png')" alt="">
                    <div>
                        <img :src="require('@/assets/images/good_voice/guest_text.png')" alt="">
                    </div>
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_right.png')" alt="">
                    </div>
                </div>
                <img class="voice_decorate_img" :src="require('@/assets/images/good_voice/guest_decorate_img.png')" alt="">
                <div :class="'box_jiabin box_jiabin'+jury_list.length">
                    <div class="list_dan" v-for="item,index in jury_list" :key="index">
                    <div class="header_image">
                        <img :src="require('@/assets/images/good_voice/guest_frame.png')" alt="">
                        <img :src="item.head_pic" alt=""
                        onerror="javascript:this.src='http://img.xunyinjiaoyou.com/upload/avatar/default.png';">
                    </div>
                    <span>{{item.nickname}}</span>
                    </div>
                </div>
                </div>
            </div>
            </div>
            <Popup v-model:show="show_model" :close-on-click-overlay="false">
            <div class="block">
                <div class="close" @click="show_model = false">
                <img :src="require('@/assets/images/good_voice/popup_close_icon.png')" alt="">
                </div>
                <div class="center_rule">
                <div class="top_jackpot">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_left.png')" alt="">
                    <img :src="require('@/assets/images/good_voice/jackpo_light_right.png')" alt="">
                    <div class="Cumulative">
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_left.png')" alt="">
                    <div>
                        <img v-if="model_type==1" :src="require('@/assets/images/good_voice/baoming_text.png')" alt="">
                        <img v-if="model_type==2" :src="require('@/assets/images/good_voice/rule_text.png')" alt="">
                        <img v-if="model_type==3" :src="require('@/assets/images/good_voice/jiangli_text.png')" alt="">
                        <img v-if="model_type==4" :src="require('@/assets/images/good_voice/liucheng_text.png')" alt="">
                        <img v-if="model_type==5" :src="require('@/assets/images/good_voice/baiozhun_text.png')" alt="">
                    </div>
                    <img :src="require('@/assets/images/good_voice/jackpo_yin_right.png')" alt="">
                    </div>
                </div>
                <img class="voice_decorate_img" :src="require('@/assets/images/good_voice/baoming_decorate_img.png')" alt="">
                <div class="center_rule_message" v-if="model_type==1">
                    <div class="wenben_mss">
                    <span>1、喜欢唱歌,表现自我的小伙伴</span>
                    <span>2、有音乐基础的小伙伴有加分 </span>
                    <span>3、不同曲风的歌手优先录用</span>
                    <span>4、有充分的时间,保证后续比赛不间断</span>
                    <span>5 、积极配合官方完成比赛</span>
                    </div>
                    <div class="image_erwm">
                    <img :src="require('@/assets/images/good_voice/erweima_img.png')" alt="">
                    </div>
                    <div class="contact_kefu">
                    联系客服报名参与海选
                    </div>
                    <div class="copy_kefu" v-clipboard:copy="copyUrl1" v-clipboard:success="onCopy" v-clipboard:error="onError">
                    <span>客服微信号:{{copyUrl1}}</span>
                    <img :src="require('@/assets/images/good_voice/copy_icon.png')" alt="">
                    </div>
                </div>
                <div class="mode_type2" v-if="model_type==2">
                    <span>奖池基础金额为5000元</span>
                    <span>每个应援棒价格10钻</span>
                    <span>用户购买应援棒支持喜欢的歌手</span>
                    <span>奖池则增加0.1元。</span>
                </div>
                <div class="mode_type3" v-if="model_type==3">
                    <div class="rangk_01">
                    <div class="bg_rank">
                        <img :src="require('@/assets/images/good_voice/no.1_lab.png')" alt="">
                    </div>
                    <div class="gift_num_list">
                        <div class="list_num" v-for="item,index in rank1_list" :key="index">
                        <div class="nor_gift">
                            <img :src="item.icon" alt="">
                            <div class="xiand" v-if="item.isShow">限</div>
                        </div>
                        <div class="name_gift">
                            <span>{{item.name}}</span>
                            <span>{{item.value}}</span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="rangk_01">
                    <div class="bg_rank">
                        <img :src="require('@/assets/images/good_voice/no.2_lab.png')" alt="">
                    </div>
                    <div class="gift_num_list">
                        <div class="list_num list_num2" v-for="item,index in rank2_list" :key="index">
                        <div class="nor_gift">
                            <img :src="item.icon" alt="">
                            <div class="xiand" v-if="item.isShow">限</div>
                        </div>
                        <div class="name_gift">
                            <span>{{item.name}}</span>
                            <span>{{item.value}}</span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="rangk_01">
                    <div class="bg_rank">
                        <img :src="require('@/assets/images/good_voice/no.3_lab.png')" alt="">
                    </div>
                    <div class="gift_num_list">
                        <div class="list_num list_num2" v-for="item,index in rank3_list" :key="index">
                        <div class="nor_gift">
                            <img :src="item.icon" alt="">
                            <div class="xiand" v-if="item.isShow">限</div>
                        </div>
                        <div class="name_gift">
                            <span>{{item.name}}</span>
                            <span>{{item.value}}</span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="rangk_01">
                    <div class="bg_rank bg_rank2">
                        <img :src="require('@/assets/images/good_voice/16_frame.png')" alt="">
                        <span>好声音16强</span>
                    </div>
                    <div class="gift_num_list">
                        <div class="list_num list_num2" v-for="item,index in rank4_list" :key="index">
                        <div class="nor_gift">
                            <img :src="item.icon" alt="">
                            <div class="xiand" v-if="item.isShow">限</div>
                        </div>
                        <div class="name_gift">
                            <span>{{item.name}}</span>
                            <span>{{item.value}}</span>
                        </div>
                        </div>
                    </div>
                    </div>
                    <div class="rangk_01">
                    <div class="bg_rank bg_rank2">
                        <img :src="require('@/assets/images/good_voice/16_frame.png')" alt="">
                        <span>好声音32强</span>
                    </div>
                    <div class="gift_num_list">
                        <div class="list_num list_num2" v-for="item,index in rank5_list" :key="index">
                        <div class="nor_gift">
                            <img :src="item.icon" alt="">
                            <div class="xiand" v-if="item.isShow">限</div>
                        </div>
                        <div class="name_gift">
                            <span>{{item.name}}</span>
                            <span>{{item.value}}</span>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="mode_type4" v-if="model_type==4">
                    <div class="progress">
                    <div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                    </div>
                    <div>
                        <div></div>
                    </div>
                    </div>
                    <div class="rule_text">
                    <div class="cengci cengci1">
                        <img :src="require('@/assets/images/good_voice/haixuan.png')" alt="">
                        <span>报名参与海选,入围有礼,等你来唱</span>
                    </div>
                    <div class="cengci">
                        <img :src="require('@/assets/images/good_voice/baiqiang.png')" alt="">
                        <span>100位优秀歌手,10天左右</span>
                    </div>
                    <div class="cengci">
                        <img :src="require('@/assets/images/good_voice/32.png')" alt="">
                        <span>排名制,每人1首演唱歌曲</span>
                    </div>
                    <div class="cengci">
                        <img :src="require('@/assets/images/good_voice/16.png')" alt="">
                        <span>pk制,每人1首演唱歌曲</span>
                    </div>
                    <div class="cengci">
                        <img :src="require('@/assets/images/good_voice/three.png')" alt="">
                        <span>排名制,每人2首演唱歌曲</span>
                    </div>
                    <div class="cengci">
                        <img :src="require('@/assets/images/good_voice/guanjun.png')" alt="">
                        <span>1号pk2号,2号pk3号,1号pk3号每人3首决胜负</span>
                    </div>
                    </div>
                </div>
                <div class="mode_type5" v-if="model_type==5">
                    <div class="rank_pangm">
                    <img :src="require('@/assets/images/good_voice/haixuan.png')" alt="">
                    <span>由官方评委打分录用</span>
                    </div>
                    <div class="rank_pangm">
                    <img :src="require('@/assets/images/good_voice/32.png')" alt="">
                    <span>官方打分（40%）+观众投票（60%）录取前32名</span>
                    </div>
                    <div class="rank_pangm">
                    <img :src="require('@/assets/images/good_voice/16.png')" alt="">
                    <span>官方打分（25%）+观众投票（50%）+ 嘉宾打分（25%）
                    </span>
                    </div>
                    <div class="rank_pangm">
                    <img :src="require('@/assets/images/good_voice/three.png')" alt="">
                    <span>官方打分（20%）+观众投票（40%）
                        + 嘉宾打分（20%）+ 礼物得分（20%）</span>
                    </div>
                    <div class="rank_pangm">
                    <img :src="require('@/assets/images/good_voice/guanjun.png')" alt="">
                    <span>官方打分（20%）+观众投票（40%）
                        + 嘉宾打分（20%）+ 礼物得分（20%）</span>
                    </div>
                </div>
                </div>
            </div>
            </Popup>
            <Popup v-model:show="vote_mode" :close-on-click-overlay="false">
            <div class="vote_toppiao">
                <div class="close" @click="vote_mode = false;num_yyb=''">
                <img :src="require('@/assets/images/good_voice/popup_close_icon.png')" alt="">
                </div>
                <div class="center_vote">
                <div class="heder_top">确认投票给{{splice_(user_item.nickname)}}吗？</div>
                <div class="ipt_num">
                    <div class="ipt_ba">
                    <input type="number" placeholder="请输入赠送的应援棒数量" v-model="num_yyb"
                        onkeyup="value=value.replace(/[^\d]+/g,'')">
                    </div>
                    <div class="btn_all" @click="num_yyb = gift_num">全部</div>
                </div>
                <div class="all_surplus">
                    <span>当前剩余:{{gift_num}}个</span>
                    <!-- <div @click="torecharge">购买应援棒></div> -->
                    <div @click="buy_model = true">购买应援棒></div>
                </div>
                <div class="btn_determine" @click="get_VoiceVote">确定</div>
                </div>
            </div>
            </Popup>
            <Popup v-model:show="buy_model" :close-on-click-overlay="false">
            <div class="buy_">
                <div class="close" @click="buy_model = false;num_buy=1">
                <img :src="require('@/assets/images/good_voice/popup_close_icon.png')" alt="">
                </div>
                <div class="center_modelo">
                <div class="heder_top">购买应援棒</div>
                <span>10钻=1个应援棒</span>
                <div class="Stepper">
                    <div class="left_step">
                    <div class="stepp" @click="num_buy--">-</div>
                    <div class="ipt_a"><input type="number" onkeyup="value=value.replace(/[^\d]+/g,'')" v-model="num_buy">
                    </div>
                    <div class="stepp" @click="num_buy++">+</div>
                    </div>
                    <div class="right_all" @click="all_">全部</div>
                </div>
                <div class="spend_zuans">总计花费 <span>{{num_buy*10}}</span> 钻</div>
                <div class="surplus_">
                    <div class="syu_zuans">
                    <div>剩余钻石</div>
                    <span>{{diamond_money}}</span>
                    <div @click="open_charge"><span>+</span></div>
                    </div>
                    <div class="quer_ipt" @click="buy_VoiceBuy">
                    确认
                    </div>
                </div>
                </div>
            </div>
            </Popup>
        </div>
    </section>
</template>


<script lang="ts">
import { defineComponent, reactive, toRefs, inject, getCurrentInstance, watch, onMounted, onUnmounted } from 'vue'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
import { activityGoodVoiceRank, activityGoodVoiceBuy, activityGoodVoiceVote, activityGoodVoiceIndex, activityGoodVoiceGet } from '@/api/activity'
import wx from 'weixin-js-sdk'
import { Toast, CountDown, Image, Popover, NoticeBar, Popup } from 'vant'
import 'vant/lib/index.css'

export default defineComponent({
    components: {
        HeaderComponent,
        CountDown,
        Image,
        Popover,
        NoticeBar,
        Popup
    },
    setup() {
        const currentInstance: any = getCurrentInstance()
        const data = reactive<Record<string, any>>({
            isStart_time: true, //活动倒计时
            num_buy: 1, //购买数量
            num_yyb: '', //应援榜
            buy_model: false, //购买
            model_type: '',
            copyUrl1: 'xunyinjiaoyou',
            show_model: false, //报名等弹窗
            showPopover: false,
            keyword: '', //搜索内容
            sort: 2, //1分数2票数
            play_index: '', //当前播放下标
            height: inject<number>('getHeight') ? inject<number>('getHeight') : 48,
            audio: {},
            vote_mode: false, //投票model
            list: [], //排名数据
            showTime: '', //倒计时
            step: '1', //阶段
            stepPre: '1', //现在阶段
            gift_num: '', //应援棒数量
            diamond_money: '', //钻石数
            get_status: '', //今日是否领取：0-未领取、1-已领取
            total_money: '', //奖池金额
            step_list: [{
                "step": 1,
                "step_name": "海选赛",
                "step_subtitle": "N进100",
                "start_time": 1655783768,
                "end_time": 1656561372,
                "start_date": "06.21",
                "end_date": "06.30"
            }, {
                "step": 2,
                "step_name": "预赛",
                "step_subtitle": "100进32",
                "start_time": 1656647800,
                "end_time": 1656907005,
                "start_date": "07.01",
                "end_date": "07.04"
            }, {
                "step": 3,
                "step_name": "复赛",
                "step_subtitle": "32进16",
                "start_time": 1656907026,
                "end_time": 1657079830,
                "start_date": "07.04",
                "end_date": "07.06"
            }, {
                "step": 4,
                "step_name": "决赛",
                "step_subtitle": "16进3",
                "start_time": 1655697449,
                "end_time": 1657166255,
                "start_date": "06.20",
                "end_date": "07.07"
            }, {
                "step": 5,
                "step_name": "总决赛",
                "step_subtitle": "冠军之夜",
                "start_time": 1657166275,
                "end_time": 1657252678,
                "start_date": "07.07",
                "end_date": "07.08"
            }], //赛程列表
            scroll: '',
            isone: true, //第一次滚动
            jury_list: [], //嘉宾
            user_item: {}, //被投投票用户信息
            user_index: '', //被投用户下标
            rank1_list: [
            {
                name: '冠军头像框',
                value: "",
                icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
                isShow: false
            },
            {
                name: '冠军勋章',
                value: "",
                icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
                isShow: false
            },
            {
                name: '奖池奖励',
                value: "",
                icon: require('@/assets/images/good_voice/box60.png'),
                isShow: false
            },
            {
                name: '热门推荐',
                value: "",
                icon: require('@/assets/images/good_voice/gift_tuijian_img.png'),
                isShow: false
            },
            {
                name: '冠军奖杯',
                value: "",
                icon: require('@/assets/images/good_voice/jiangbei1.png'),
                isShow: false
            },
            ],
            rank2_list: [{
                name: '亚军头像框',
                value: "",
            icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
                isShow: false
            },
            {
                name: '亚军勋章',
                value: "",
                icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
                isShow: false
            },
            {
                name: '奖池奖励',
                value: "",
                icon: require('@/assets/images/good_voice/box20.png'),
                isShow: false
            },
            {
                name: '亚军奖杯',
                value: "",
                icon: require('@/assets/images/good_voice/jiangbei2.png'),
                isShow: false
            },
            ],
            rank3_list: [{
                name: '季军头像框',
                value: "",
                icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
                isShow: false
            },
            {
                name: '季军勋章',
                value: "",
                icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
                isShow: false
            },
            {
                name: '奖池奖励',
                value: "",
                icon: require('@/assets/images/good_voice/box10.png'),
                isShow: false
            },
            {
                name: '季军奖杯',
                value: "",
                icon: require('@/assets/images/good_voice/jiangbei3.png'),
                isShow: false
            },
            ],
            rank4_list: [{
                name: '好声音头像框',
                value: "",
            icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
                isShow: false
            },
            {
                name: '好声音勋章',
                value: "",
                icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
                isShow: false
            },
            {
                name: '限定礼物',
                value: "价值1880钻",
                icon: require('@/assets/images/good_voice/box60.png'),
                isShow: true
            },
            {
                name: '16强奖杯',
                value: "",
                icon: require('@/assets/images/good_voice/jiangbei4.png'),
                isShow: false
            },
            ],
            rank5_list: [{
                name: '好声音头像框',
                value: "",
                icon: 'http://img.xunyinjiaoyou.com/upload/goods/202204/15/1650003705.png?x-oss-process=image/resize,w_300',
                isShow: false
            },
            {
                name: '好声音勋章',
                value: "",
            icon: "http://img.xunyinjiaoyou.com/upload/goods/202111/10/1636543026.png?x-oss-process=image/resize,w_300",
                isShow: false
            },
            {
                name: '限定礼物',
                value: "价值1000钻",
                icon: require('@/assets/images/good_voice/box60.png'),
                isShow: true
            },
            {
                name: '32强奖杯',
                value: "",
                icon: require('@/assets/images/good_voice/jiangbei5.png'),
                isShow: false
            },
            ],
        })
        onMounted(()=>{
            window.addEventListener('scroll', handleScroll);
        })
        onUnmounted(()=>{
            window.removeEventListener('scroll', handleScroll)
        })
        watch(data.num_yyb,() => {
            if (data.num_yyb > data.gift_num) {
                data.num_yyb = data.gift_num;
                Toast('当前剩余' + data.gift_num)
            }
        },{ deep: true })
        watch(data.num_buy,() => {
            if (data.num_buy < 0) {
                data.num_buy = 0;
                Toast('请输入正确数量')
            } else if (data.num_buy * 10 > data.diamond_money) {
                data.num_buy = Math.floor(data.diamond_money / 10);
                Toast('钻石不足')
            }
        },{ deep: true })
        watch(data.keyword,() => {
            if (data.keyword == '') {
                cur_tab(data.step);
            }
        },{ deep: true })
        const handleScroll = ():void => {
            //或者使用document.querySelector('.class或者#id').scrollTop
            data.scroll = document.documentElement.scrollTop || document.body.scrollTop
            if (data.scroll > 400 && data.isone) {
                cur_tab(data.step)
                data.isone = false;
            }
        }
        const torecharge = (): void => {
            if ((window as any).isWeixin) {
                wx.miniProgram.navigateTo({
                    url: "/pages/recharge/recharge",
                });
            } else {
            if ((window as any).isiOS) {
                (window as any).webkit.messageHandlers.pageJumpRecharge.postMessage({});
            } else {
                (window as any).app.pageJumpRecharge();
            }
            }
        }
        const SignIn_new = (): void => {
            console.log('结束')
        }
        const onCopy = (): void => {
            Toast("复制成功")
        }
        const onError = (): void => {
            Toast("复制失败")
        }
        const splice_ = (value: any): any => {
            let slice2 = "";
            if (value) {
                if (value.length > 5) {
                    slice2 = value
                    slice2 = slice2.slice(0, 4)
                    return slice2 + '...';
                } else {
                    return value
                }
            }
        }
        const splice_2 = (value: any): any => {
            let slice2 = "";
            if (value) {
                if (value.length > 8) {
                    slice2 = value
                    slice2 = slice2.slice(0, 7)
                    return slice2 + '...';
                } else {
                    return value
                }
            }
        }
        const all_ = (): void => {
            data.num_buy = Math.floor(data.diamond_money / 10)
        }
        const cur_tab = async (index: number): Promise<void> => {
            if (index > data.stepPre) {
                Toast("未开始")
                return 
            }
            data.step = index;
            let arys = {
                step: data.step,
                sort: data.sort,
                keyword: data.keyword,
            }; //参数
            const dataRes = await activityGoodVoiceRank(arys)
            if (dataRes.data.status == 0) {
            for (var i = 0; i < dataRes.data.result.rank_list.length; i++) {
              dataRes.data.result.rank_list[i].play = false;
            }
            data.list = dataRes.data.result.rank_list;
            data.jury_list = dataRes.data.result.jury_list;


            let step_date = data.step - 1;
            const nowDate: any = new Date()
            const nowtime = parseInt(nowDate.getTime())
            if (nowtime > data.step_list[step_date].end_time * 1000) {
              // console.log('活动已结束');
              data.isStart_time = false;
              data.showTime = data.step_list[step_date].end_time * 1000 - nowtime; //倒计时
            } else {
              // console.log('开始');
              data.isStart_time = true;
              data.showTime = data.step_list[step_date].end_time * 1000 - nowtime; //倒计时
            }
          }
        }
        const buy_VoiceBuy = async (): Promise<void> => {
            if (data.num_buy < 1) {
                Toast('数量不能为空')
                return
            }
            let arys = {
                num: data.num_buy
            } //参数
            const dataRes = await activityGoodVoiceBuy(arys)
            if (dataRes.data.status == 0) {
                data.gift_num = dataRes.data.result.gift_num;
                data.diamond_money = dataRes.data.result.diamond_money;

                data.num_buy = '1';
                data.buy_model = false;
            }
            Toast(dataRes.data.text)
        }
        const get_VoiceVote = async (): Promise<void> => {
            if (data.num_yyb < 1) {
                Toast('数量不能为空')
                return 
            }
            let arys = {
                memberId: data.user_item.user_id,
                num: data.num_yyb,
                source: (window as any).isiOS ? 'ios' : 'android',
            } //参数
            const dataRes = await activityGoodVoiceVote(arys)
            if (dataRes.data.status == 0) {
                data.gift_num = dataRes.data.result.my_num;
                data.diamond_money = dataRes.data.result.userMoney;

                data.num_yyb = '';
                data.vote_mode = false;

                if (data.sort == 1) {
                cur_tab(data.step)
                } else {
                data.list[data.user_index].vote_num += dataRes.data.result.num * 1
                // console.log(this.list[this.user_index].vote_num);
                }
            }
            // console.log(res.data.result);
            Toast(dataRes.data.text)
        }
        const tab_avtive_index = (index: any):void => {
            data.sort = index;
            data.showPopover = false;
            cur_tab(data.step)
        }
        const btn_vote = (item: any, index: number): void => {
            data.vote_mode = true;
            data.user_item = item;
            data.user_index = index;
        }
        const btn_vote2 = (): void => {
            Toast('已结束')
        }
        const playvoice = (index: any):void => {
            data.play_index = index;
            let middle: any = 'middle' + index;
            middle = currentInstance.proxy.$refs[middle][0];
            if (middle.paused) {
            // 切换播放中的css样式
            data.list.some((item: any, index2: number) => {
                item.play = false;
                let middle: any = 'middle' + index2;
                middle = currentInstance.proxy.$refs[middle][0];
                middle.pause()
            })
            // middle.play()
            let playPromise = middle.play()
            if (playPromise !== undefined) {
                playPromise.then(() => {
                middle.play()
                data.list[index].play = true;
                }).catch((error: any) => {console.log(error)})
            }
            } else {
                // 切换未播放的css样式
                middle.pause()
                data.list[index].play = false;
            }
        }
        const onPlay = (): void => {
            data.audio.playing = true;
            data.list[data.play_index].play = true;
        }
        const onPause = ():void => {
            data.audio.playing = false;
            data.list[data.play_index].play = false;
        }
        const onTimeupdate = (res: any): void => {
            data.audio.currentTime = res.target.currentTime;
        }
        const onLoadedmetadata = (res: any): void => {
            data.audio.maxTime = parseInt(res.target.duration)
        }
        const good_voice = async (): Promise<void> => {
            let arys = {}; //参数
            const dataRes = await activityGoodVoiceIndex(arys)
            if (dataRes.data.status == 0) {
                data.step = dataRes.data.result.step; //阶段
                data.stepPre = dataRes.data.result.step; //阶段
                data.gift_num = dataRes.data.result.gift_num; //应援棒数量
                data.diamond_money = dataRes.data.result.diamond_money; //应援棒数量
                data.get_status = dataRes.data.result.get_status; //今日是否领取：0-未领取、1-已领取
                data.total_money = dataRes.data.result.total_money; //奖池金额
                data.step_list = dataRes.data.result.step_list; //赛程列表

                let step_date = dataRes.data.result.step - 1;
                const nowDate: any = new Date()
                const nowtime = parseInt(nowDate.getTime())
                data.showTime = dataRes.data.result.step_list[step_date].end_time * 1000 - nowtime; //倒计时
            }
        }
        const goodVoiceGet = async (): Promise<void> => {
            let arys = {}; //参数
            const dataRes = await activityGoodVoiceGet(arys)
            if (dataRes.data.status == 0) {
                data.gift_num = dataRes.data.result.gift_num; //应援棒数量
                data.get_status = 1; //应援棒数量
            }
            Toast(dataRes.data.text)
        }
        const open_usrt = (user: any): void => {
            if ((window as any).isWeixin) {
                wx.miniProgram.navigateTo({
                    url: "/pages/me/me?memberId=" + user,
                });
            } else {
                if ((window as any).isiOS) {
                    console.log("isiOS环境");
                    (window as any).webkit.messageHandlers.openProfile.postMessage({
                    userId: user,
                    });
                } else {
                    console.log("安卓环境");
                    (window as any).app.openProfile(user);
                }
            }
        }
        const open_charge = (): void => {
            if ((window as any).isWeixin) {
            wx.miniProgram.navigateTo({
                url: "/pages/recharge/recharge"
            }); //充值
            } else {
            if ((window as any).isiOS) {
                console.log("isiOS环境");
                (window as any).webkit.messageHandlers.pageJumpRecharge.postMessage({})
            } else {
                console.log("安卓环境");
                (window as any).app.pageJumpRecharge();
            }
            }
        }
        good_voice()
        return {
            open_charge,
            open_usrt,
            goodVoiceGet,
            good_voice,
            onLoadedmetadata,
            onTimeupdate,
            onPause,
            btn_vote2,
            onPlay,
            btn_vote,
            playvoice,
            buy_VoiceBuy,
            get_VoiceVote,
            tab_avtive_index,
            torecharge,
            SignIn_new,
            onCopy,
            onError,
            splice_,
            splice_2,
            all_,
            ...toRefs(data)
        }
    }
})
</script>

<style lang="less" scoped>
@import './GoodVoice.less';
</style>